<template>
  <ContentDetailWrap :title="t('warehouse.add')">
    <template #header>
      <BaseButton @click="go(-1)">
        {{ t('common.back') }}
      </BaseButton>
    </template>
    <!-- 表单 -->
    <el-collapse-transition>
      <el-descriptions border :column="2" abel-align="left" content-align="left">
        <el-descriptions-item :label="t('productMerge.productname')" width="25%">
          {{ state.currentRow?.productname }}
        </el-descriptions-item>
        <el-descriptions-item :label="t('productMerge.producturlname')" width="25%">
          {{ state.currentRow?.producturlname }}
        </el-descriptions-item>

        <el-descriptions-item :label="t('productMerge.primary_pid')" width="25%">
          {{ state.currentRow?.primary_pid_name }}
        </el-descriptions-item>

        <el-descriptions-item :label="t('productMerge.vice_pid')" width="25%">
          <div>
            <template
              v-for="(item, index) in state.currentRow?.productRelation?.filter((item: any) => !item.is_primary)"
              :key="index"
            >
              <div>
                {{ item.product }}
              </div>
            </template>
          </div>
        </el-descriptions-item>

        <el-descriptions-item :label="t('productMerge.sales_pids')" width="25%">
          <div>
            <template v-for="(item, index) in state.currentRow?.sales_pids_list" :key="index">
              <div>
                {{ item.cname }}
              </div>
            </template>
          </div>
        </el-descriptions-item>

        <el-descriptions-item :label="t('productMerge.estimate_price')" width="25%">
          {{ state.currentRow?.estimate_price }}
        </el-descriptions-item>

        <!-- <el-descriptions-item :label="t('productMerge.recommend_pids')" width="25%">
          <div>
            <template v-for="(item, index) in state.currentRow?.recommend_pids_list" :key="index">
              <div>
                {{ item.cname }}
              </div>
            </template>
          </div>
        </el-descriptions-item> -->

        <el-descriptions-item :label="t('productMerge.product_photo')" width="25%">
          <FileList :files="state.currentRow?.product_photo_list || []" />
        </el-descriptions-item>

        <el-descriptions-item :label="t('productMerge.closeshots_photo')" width="25%">
          <FileList :files="state.currentRow?.closeshots_photo_list || []" />
        </el-descriptions-item>

        <el-descriptions-item :label="t('productMerge.pmv_id')" width="25%">
          <FileList :files="state.currentRow?.pmv_id_list || []" />
        </el-descriptions-item>

        <el-descriptions-item :label="t('productMerge.smv_id')" width="25%">
          <FileList :files="state.currentRow?.smv_id_list || []" />
        </el-descriptions-item>

        <el-descriptions-item :label="t('productMerge.storename')" width="25%">
          <div>
            <template
              v-for="(item, index) in state.currentRow?.storename_val?.split(',')"
              :key="index"
            >
              <div>
                {{ item.trim() }}
              </div>
            </template>
          </div>
        </el-descriptions-item>

        <el-descriptions-item :label="t('productMerge.seotitle')" width="25%">
          {{ state.currentRow?.seotitle }}
        </el-descriptions-item>

        <el-descriptions-item :label="t('productMerge.seodesc')" width="25%">
          {{ state.currentRow?.seodesc }}
        </el-descriptions-item>

        <el-descriptions-item :label="t('productMerge.views_number')" width="25%">
          {{ state.currentRow?.views_number }}
        </el-descriptions-item>

        <el-descriptions-item :label="t('productMerge.describe')" width="25%">
          {{ state.currentRow?.describe }}
        </el-descriptions-item>

        <el-descriptions-item :label="t('productMerge.status')" width="25%">
          {{ state.currentRow?.status === '1' ? '上架' : '下架' }}
        </el-descriptions-item>

        <el-descriptions-item :label="t('productMerge.creator')" width="25%">
          {{ state.currentRow?.creator_name }}
        </el-descriptions-item>

        <el-descriptions-item :label="t('productMerge.create_time')" width="25%">
          {{ state.currentRow?.create_time }}
        </el-descriptions-item>

        <el-descriptions-item :label="t('productMerge.updater')" width="25%">
          {{ state.currentRow?.updater_name }}
        </el-descriptions-item>

        <el-descriptions-item :label="t('productMerge.update_time')" width="25%">
          {{ state.currentRow?.update_time }}
        </el-descriptions-item>
      </el-descriptions>
    </el-collapse-transition>
    <el-form class="flex flex-wrap" label-width="50%">
      <el-form-item :label="t('productMerge.full_describe')" class="w-50%" prop="full_describe">
        <Editor v-model="state.form.full_describe" :editorConfig="editorConfig" />
      </el-form-item>
    </el-form>
  </ContentDetailWrap>
</template>

<script setup lang="tsx">
import { ref, reactive } from 'vue'
import { CurdData } from '@/api/productMerge/types'
import { getInfoApi } from '@/api/productMerge'
import { useI18n } from '@/hooks/web/useI18n'
import { useRouter, useRoute } from 'vue-router'
import FileList from '@/components/FilePreview/index.vue' // 引入 FilePreview 组件
import type { IEditorConfig } from '@wangeditor/editor'

const { push, go } = useRouter()
const { t } = useI18n()

const isLoading = ref(true)

const { query } = useRoute()

const state = reactive({
  currentRow: null as Nullable<CurdData>,
  form: {
    full_describe: ''
  }
})
const editorConfig: IEditorConfig = {
  readOnly: true,
  customAlert: (info: string, type: 'success' | 'info' | 'warning' | 'error') => {
    ElMessage[type](info)
  },
  scroll: false,
  autoFocus: false
}

const fetchData = async () => {
  const resp = await getInfoApi(query.id as string)
  state.currentRow = resp.data
  state.form.full_describe = resp.data.full_describe
  isLoading.value = false
}

fetchData()
</script>

<style lang="less" scoped>
.header {
  display: flex;
  height: 40px;
  padding: 0 10px;
  margin-bottom: 10px;
  font-weight: 900;
  background-color: #f3f3f3;
  border-radius: 5px;
  align-items: center;
  justify-content: space-between;
}

:deep(.el-form-item__label) {
  padding: 8px 11px;
  text-align: left !important;
  justify-content: left !important;
}
</style>
